<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>Canvas 画图</title>
    <script src="js/zepto-1.1.4.min.js" type="text/javascript"></script>
    <script src="js/cheapy_chart.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="position: relative;height: 300px; width: 400px;"></div>
<script type="text/javascript">
    $(function(){
        var chart = new CheapyChart({
            el: "#container",
            animation: {
                enable: true,
                timeout: 2000
            },
            title: {
                name: "Cheapy"
            },
            legend: {
                show: true
            },
            tooltip: {
                show: true,
                formatter: function(arr){
                    var html = [], item , i, type;
                    for(i= 0; i < arr.length; i++){
                        item = arr[i];
                        if(item){
                            type = item.type;
                            if(type === "kline"){
                                html.push('<div class="gp-pos-v2">');
                                html.push('<i></i>');
                                html.push('<div class="p1"><span>开盘：', item.value[0] ,'</span></div>');
                                html.push('<div class="p1"><span>收盘：', item.value[1] ,'</span></div>');
                                html.push('<div class="p2">', item.name ,'</div>');
                                html.push('</div>');
                            }
                        }
                    }
                    return html.join("");
                },
                position: function(arr){
                    return [arr[0], 400];
                }
            },
            yAxis: {
                boundaryGap: [.05, 0.05],
                splitLine: {
                    show: 1
                }
            },
            xAxis: {
                boundaryGap: [.05,.05],
                splitLine: {
                    show: false,
                    count: 9,
                    itemStyle: {
                        type: "dot"
                    }
                },
                axisLabel: {

                },
                axisLine: {
                    show: true
                },
                data: [
                    "1", "3", "3", "4", "5", "6", "7", "8", "9","1", "3", "3", "4", "5", "6", "7", "8", "9","1", "3", "3", "4", "5", "6", "7", "8", "9","1", "3", "3", "4", "5", "6", "7", "8", "9"
                ]
            },
            series : [{
                show: true,
                type: "kline",
                name: "myKLine",
                data: [
                    [2320.26,2302.6,2287.3,2362.94],
                    [2300,2291.3,2288.26,2308.38],
                    [2295.35,2346.5,2295.35,2346.92],
                    [2347.22,2358.98,2337.35,2363.8],
                    [2360.75,2382.48,2347.89,2383.76],
                    [2383.43,2385.42,2371.23,2391.82],
                    [2377.41,2419.02,2369.57,2421.15],
                    [2425.92,2428.15,2417.58,2440.38],
                    [2411,2433.13,2403.3,2437.42],
                    [2320.26,2302.6,2287.3,2362.94],
                    [2300,2291.3,2288.26,2308.38],
                    [2295.35,2346.5,2295.35,2346.92],
                    [2347.22,2358.98,2337.35,2363.8],
                    [2360.75,2382.48,2347.89,2383.76],
                    [2383.43,2385.42,2371.23,2391.82],
                    [2377.41,2419.02,2369.57,2421.15],
                    [2425.92,2428.15,2417.58,2440.38],
                    [2411,2433.13,2403.3,2437.42],
                    [2320.26,2302.6,2287.3,2362.94],
                    [2300,2291.3,2288.26,2308.38],
                    [2295.35,2346.5,2295.35,2346.92],
                    [2347.22,2358.98,2337.35,2363.8],
                    [2360.75,2382.48,2347.89,2383.76],
                    [2383.43,2385.42,2371.23,2391.82],
                    [2377.41,2419.02,2369.57,2421.15],
                    [2425.92,2428.15,2417.58,2440.38],
                    [2411,2433.13,2403.3,2437.42],
                    [2320.26,2302.6,2287.3,2362.94],
                    [2300,2291.3,2288.26,2308.38],
                    [2295.35,2346.5,2295.35,2346.92],
                    [2347.22,2358.98,2337.35,2363.8],
                    [2360.75,2382.48,2347.89,2383.76],
                    [2383.43,2385.42,2371.23,2391.82],
                    [2377.41,2419.02,2369.57,2421.15],
                    [2425.92,2428.15,2417.58,2440.38],
                    [2411,2433.13,2403.3,2437.42]
                ],
                upColor: "",
                downColor: "",
                markLine: [{
                    type: "value",
                    value: 2300,
                    lineStyle: {
                        width: 2,
                        type: "dot",
                        color: "black"
                    },
                    textStyle: {
                        position: "outside",
                        size: 8,
                        weight: "bold",
                        color: "red"
                    }
                }]
            }]
        });
        chart.render();
    });
</script>
</body>
</html>